<template>
  <header>
    <h1>{{ titles }}</h1>
  </header>
  <main>
    <div id="leftBox">
      <h2><span class="iconfont icon-mulu"></span>目录</h2>
      <template v-for="(item, index) in directoryArr" :key="index">
        <a :href="`#${item.link}`" v-if="item.type === 'H1'"
          ><h1 :class="item.showColr ? 'h1Color' : ''">
            {{ item.name }}
          </h1></a
        >
        <a :href="`#${item.link}`" v-else
          ><h2 :class="item.showColr ? 'h1Color' : ''">
            {{ item.name }}
          </h2></a
        >
      </template>
    </div>
    <div id="rightBox" v-html="essInfo"></div>
  </main>
  <loading v-if="showLoading"></loading>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  onMounted,
  onBeforeUnmount,
} from "vue";
import loading from "@/components/BlogLoding.vue";
import { selectEssay } from "@/api/servers";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "",
  props: ["id", "title"],
  components: {
    loading,
  },
  setup(props) {
    let showLoading = ref(true);
    let router = useRouter();
    let essInfo = ref("");
    let directoryArr = reactive([
      { type: "", name: "", link: "", showColr: false },
    ]);
    let addmatching = ref(0);
    let titles = ref("");

    if (!props.id) {
      router.push("/");
    }

    onMounted(() => {
      window.addEventListener("scroll", onMatch);
    });

    onBeforeUnmount(() => {
      window.removeEventListener("scroll", onMatch);
    });

    selectEssay(props.id).then((response) => {
      titles.value = response?.data.title;
      essInfo.value = response?.data.textInfo;
      showLoading.value = false;
    });

    function matching(hArr: any) {
      if (addmatching.value < 2) {
        for (let i = 3; i < hArr.length; i++) {
          let Obj = {
            type: "",
            name: "",
            link: "",
            showColr: false,
          };
          Obj.type = hArr[i].nodeName;
          Obj.name = hArr[i].innerText;
          Obj.link = hArr[i].id;
          Obj.showColr = false;
          directoryArr.push(Obj);
        }
        directoryArr.shift();
        addmatching.value++;
      }
    }

    function SwitchDirectories(hArr: any) {
      if (hArr !== null && directoryArr != null) {
        for (
          let i = hArr.length - directoryArr.length + 1;
          i < hArr.length;
          i++
        ) {
          if (Math.floor(window.scrollY - hArr[i].offsetTop) <= 500) {
            for (let j = 0, len = directoryArr.length; j < len; j++) {
              directoryArr[j].showColr = false;
              if (directoryArr[j].link === hArr[i].id) {
                directoryArr[j].showColr = true;
              }
            }
            break;
          }
        }
      }
    }

    function onMatch() {
      let h1Arr = document.querySelectorAll("h1,h2");
      matching(h1Arr);
      SwitchDirectories(h1Arr);
      if (window.scrollY >= 400) {
        let leftBox: HTMLElement | null = document.querySelector("#leftBox");
        if (leftBox != null) {
          leftBox.className = "fixeds";
        }
      } else {
        let leftBox: HTMLElement | null = document.querySelector("#leftBox");
        if (leftBox != null) {
          leftBox.className = "fixedss";
        }
      }
    }

    return {
      showLoading,
      essInfo,
      directoryArr,
      titles,
    };
  },
});
</script>

<style scoped lang="scss">
@import "@/style/mixin.scss";
header {
  width: 100vw;
  height: 50vh;
  background-image: url("../assets/homeBack.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  h1 {
    user-select: none;
    color: white;
  }
}

main {
  margin: 2rem auto;
  width: 80%;
  display: flex;
  justify-content: right;
  position: relative;
  #leftBox {
    width: 20%;
    padding: 2rem;
    box-shadow: 0 0 10px black;
    border-radius: 3px;
    position: fixed;
    left: 3rem;
    a {
      text-decoration: none;
      color: black;

      h2 {
        margin-top: 1rem;
        font-size: 15px;
        padding-left: 2rem;
      }

      h1 {
        margin-top: 1rem;
        font-size: 18px;
        color: $color;
        padding-left: 1rem;
      }
      .h1Color {
        color: steelblue;
      }
    }
  }
  #rightBox {
    padding: 1rem;
    width: 70%;
    margin-left: 1rem;
    box-shadow: 0 0 10px black;
    border-radius: 3px;
  }

  .fixeds {
    top: 2rem;
    transition: all 2s;
  }

  .fixedss {
    top: 55%;
    transition: all 1s;
  }
}
@media screen and(max-width:1024px ) {
  main {
    #leftBox {
      display: none;
    }
    #rightBox {
      width: 100%;
    }
  }
}
</style>
